<template>
  <div
    class="overLap"
    v-if="checked"
    :style="{
      margin: this.controlData
        ? '20px 0 0 0'
        : tentative
        ? '0'
        : '0 147px 0 468px',
    }"
  >
    <div
      class="ring-first"
      v-for="(list, index1) in this.overlapDatas"
      :key="index1"
    >
      <div v-for="(item, index2) in list.stageLists" :key="index2">
        <!-- {{list.peddirection}} -->
        <div class="first-2">
          <el-tooltip
            v-if="item.greenWidth"
            placement="top-start"
            effect="light"
          >
            <div slot="content">
              O{{ list.id }}-
              <span v-for="(ids, index3) in list.includedphases" :key="index3">
                P{{ ids
                }}<span v-if="index3 + 1 !== list.includedphases.length"
                  >,</span
                >
              </span>
            </div>
            <div style="cursor: pointer">
              <div class="ring-phase">
                <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
                <xdrdirselector
                  Width="60px"
                  Height="60px"
                  Widths="50px"
                  Heights="50px"
                  :showlist="item.direction"
                ></xdrdirselector>
              </div>
              <div class="box">
                <div class="ring-nums">
                  O{{ list.id }}-
                  <span
                    v-for="(ids, index3) in list.includedphases"
                    :key="index3"
                  >
                    P{{ ids
                    }}<span v-if="index3 + 1 !== list.includedphases.length"
                      >,</span
                    >
                  </span>
                </div>
              </div>
            </div>
          </el-tooltip>
        </div>
        <div
          class="first-1"
          :style="{
            width: item.greenWidth,
            height: '34px',
            background: '#7ccc66',
          }"
        ></div>
        <div
          class="first-1"
          :style="{
            width: item.redWidth,
            height: '34px',
            background: '#f27979',
          }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import PhaseDataModel from 'openatc-components/package/kisscomps/components/IntersectionMap/crossDirection/utils.js'
import CrossDiagramMgr from '@/EdgeMgr/controller/crossDiagramMgr'
import xdrdirselector from '@/components/XRDDirSelector'
// import PatternWalkSvg from 'openatc-components/package/kisscomps/components/PatternWalkSvg'
export default {
  name: 'over-lap',
  components: {
    // patternwalksvg,
    xdrdirselector
  },
  data () {
    return {
      overlapDatas: [],
      max: ''
    }
  },
  props: {
    overlap: {
      type: Array,
      default () {
        return []
      }
    },
    stageList: {
      type: Array
    },
    checked: {
      type: Boolean
    },
    tentative: {
      type: Boolean,
      default: false
    },
    cycleChange: {
      type: Boolean,
      default: true
    },
    cycle: {
      type: Number
    },
    controlData: {
      type: Object
    }
  },
  watch: {
    controlData: {
      handler: function (val, oldVal) {
        this.doAdd(this.stageList, this.overlap)
      },
      // 深度观察监听
      deep: true
    },
    cycleChange: {
      handler: function (val, oldVal) {
        this.doAdd(this.stageList, this.overlap)
      },
      // 深度观察监听
      deep: true
    },
    stageList: {
      handler: function (val, oldVal) {
        this.doAdd(this.stageList, this.overlap)
      },
      // 深度观察监听
      deep: true
    }
  },
  created () {
    this.PhaseDataModel = new PhaseDataModel()
    this.CrossDiagramMgr = new CrossDiagramMgr()
    this.doAdd(this.stageList, this.overlap)
  },
  methods: {
    getRoad (i) {
      let direction = []
      if (i.direction && i.direction.length > 0) {
        i.direction.map(item => {
          direction.push({
            id: item,
            peddirection: this.getPedPhasePos(i.peddirection),
            color: '#454545'
          })
        })
      } else {
        direction.push({
          id: '',
          peddirection: this.getPedPhasePos(i.peddirection)
        })
      }
      return direction
    },
    getPedPhasePos (i) {
      // 行人相位信息
      let sidewalkPhaseData = []
      if (i) {
        i.forEach((dir, index) => {
          // 行人相位
          if (this.PhaseDataModel.getSidePos(dir)) {
            sidewalkPhaseData.push({
              key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
              phaseid: i.id, // 相位id，用于对应相位状态
              id: dir,
              name: this.PhaseDataModel.getSidePos(dir).name
            })
          }
        })
      }
      return sidewalkPhaseData
    },
    doAdd (stageList, overlap) { // 阶段显示颜色
      let overlapData = overlap.map(item => {
        let findIndexs = []
        item.includedphases.forEach(i => {
          const findItems = stageList.filter(j => j.phases.includes(i))
          if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
        })
        findIndexs = Array.from(new Set(findIndexs))
        if (this.cycleChange) {
          const globalParamModel = this.$store.getters.globalParamModel
          let pattern = globalParamModel.getParamsByType('patternList')
          const allCycle = pattern.map(item => item.cycle)
          let cycle = Math.max(...allCycle)
          this.max = cycle
        } else {
          this.max = ''
        }
        return {
          ...item,
          peddirection: this.getPedPhasePos(item.peddirection),
          sidewalkPhaseData: this.getPedPhasePos(item.peddirection),
          stageLists: stageList.map(sta => {
            const find = findIndexs.includes(sta.key)
            return {
              ...sta,
              direction: this.getRoad(item),
              // peddirection: this.getPedPhasePos(item.peddirection),
              greenWidth: find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%',
              redWidth: !find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%'
            }
          })
        }
      })
      this.overlapDatas = overlapData
    }
  }
}
</script>

<style lang="scss" scoped>
.ring-first {
  margin-top: 1px;
  width: 100%;
  height: 34px;
  .first-1 {
   float: left;
// text-align: center;
  }
  .first-2{
   position: absolute;
   color: #333333;
  }
  .ring-nums {
    // float: left;
    // margin-top:7px;
    // margin-left: 5px;
    padding-top: 10px;
    padding-left: 43px;
    font-size: 12px;
    height: 14px;
    font-weight: normal;
    font-stretch: normal;
    // line-height: 22px;
    letter-spacing: 0px;
    color: #333333;//#33333361
  }
  .ring-phase {
    position: relative;
    float: left;
    // margin-left: 5px;
    height: 34px;
    z-index: 999;
    background: rgba(30, 96, 12, 0.07);
    // margin-top:1px;
  }
  .ring-phase::after {
    position: absolute;
    display: block;
    content: '';
    height: 0;
    width: 0;
    top: 11px;
    left: 36px;
    border: 5px solid transparent;
    border-left-color: rgba(30, 96, 12, 0.07);
  }
}
</style>
